<!--
 * @Author: xiuquanxu
 * @Company: kaochong
 * @Date: 2020-12-15 20:44:13
 * @LastEditors: xiuquanxu
 * @LastEditTime: 2020-12-16 00:40:56
-->
<html>
    <meta charset="utf-8"/>
    <style>
        #parent1 {
            background-color: black;
            position: relative;
            width: 400px;
            height: 400px;
        }
        #child1 {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            margin-top: -50px;
            background-color: white;;
        }

        #parent2 {
            background-color: black;
            position: relative;
            width: 400px;
            height: 400px;
        }
        #child2 {
            width: 100px;
            height: 100px;
            position: absolute;
            transform: translate(0, -50%);
            top: 50%;
            background-color: white;;
        }

        #parent3 {
            background-color: black;
            position: relative;
            width: 400px;
            height: 400px;
        }
        #child3 {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: white;;
        }


        #parent4 {
            background-color: black;
            width: 400px;
            height: 400px;
            display: flex;
            align-items: center;
        }
        #child4 {
            width: 100px;
            height: 100px;
            background-color: white;;
        }

        #parent5 {
            background-color: black;
            color: white;
            width: 400px;
            height: 400px;
            line-height: 400px;
        }

        #parent6 {
            background-color: black;
            width: 400px;
            height: 400px;
            display: flex;
            align-items: center;
        }
        #child6 {
            width: 100px;
            height: 100px;
            display: inline-block;
            vertical-align: middle;
            background-color: white;;
        }
    </style>
    <body>
        <p>1. relative和absolute垂直居中(必须知道child高度)</p>
        <div id="parent1">
            <div id="child1">

            </div>
        </div>
        <p>2. relative和transform: translate(x,y)(不需要知道child高度)</p>
        <div id="parent2">
            <div id="child2">

            </div>
        </div>
        <p>3. margin: auto(不需要知道child高度)</p> 
        <div id="parent3">
            <div id="child3">

            </div>
        </div>
        <p>4. flex(display: flex;align-items: center)</p> 
        <div id="parent4">
            <div id="child4">

            </div>
        </div>
        <p>5. lineheight(line-height和height相等)</p> 
        <div id="parent5">
            child5
        </div>
        <p>6. vertical-align</p> 
        <div id="parent6">
            <div id="child6">

            </div>
        </div>
    </body>
</html>